<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getContextPath();
%>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title> Admin Lab Dashboard</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="css1/style.css" rel="stylesheet" />
    <link href="css1/style_responsive.css" rel="stylesheet" />
    <link href="css1/style_default.css" rel="stylesheet" id="style_color" />

    <link href="assets/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="assets/uniform/css/uniform.default.css" />
    <link href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
    <link href="assets/jqvmap/jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />



</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="fixed-top">
<!-- BEGIN HEADER -->
<div id="header" class="navbar navbar-inverse navbar-fixed-top">
    <!-- BEGIN TOP NAVIGATION BAR -->
    <div class="navbar-inner">
        <div class="container-fluid">
            <!-- BEGIN LOGO -->
            <a class="brand" href="index.html">
                <img src="img/logo.png" alt="Admin Lab" />
            </a>
            <!-- END LOGO -->
            <!-- BEGIN RESPONSIVE MENU TOGGLER -->
            <a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="arrow"></span>
            </a>
            <!-- END RESPONSIVE MENU TOGGLER -->
            <div id="top_menu" class="nav notify-row">
                <!-- BEGIN NOTIFICATION -->
                <ul class="nav top-menu"></ul>
            </div>
            <!-- END  NOTIFICATION -->
            <div class="top-nav ">
                <ul class="nav pull-right top-menu" >
                    <!-- BEGIN USER LOGIN DROPDOWN -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="${sessionScope.user.header }" alt="" style="width:50px;height:50px;border-radius:50px">
                            <span class="username">管理员 ${sessionScope.user.name},你好</span>
                            <span class="userID" id="userID" style="display:none">${sessionScope.user.userID}</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="logout"><i class="icon-key"></i> 登出</a></li>
                        </ul>
                    </li>
                    <!-- END USER LOGIN DROPDOWN -->
                </ul>
                <!-- END TOP NAVIGATION MENU -->
            </div>
        </div>
    </div>
    <!-- END TOP NAVIGATION BAR -->
</div>
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div id="container" class="row-fluid">
    <!-- BEGIN SIDEBAR -->
    <div id="sidebar" class="nav-collapse collapse">
        <div class="sidebar-toggler hidden-phone"></div>
        <!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
        <div class="navbar-inverse">
            <form class="navbar-search visible-phone">
                <input type="text" class="search-query" placeholder="Search" />
            </form>
        </div>
        <!-- END RESPONSIVE QUICK SEARCH FORM -->
        <!-- BEGIN SIDEBAR MENU -->
        <ul class="sidebar-menu">
            <li class="has-sub">
                <a href="javascript:;" class="">
                    <span class="icon-box"><i class="icon-cogs"></i></span> 视频管理
                    <span class="arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="<%=basePath%>/videoList">查看所有视频</a></li>
                    <li><a class="" href="<%=basePath%>/addVideoMg">添加视频</a></li>
                </ul>
            </li>
            <li class = "active">
                <a class="" href="<%=basePath%>/categoryList">
                <span class="icon-box"><i class="icon-tasks"></i></span> 类别管理
                </a>
            </li>
            <li>
                <a class="" href="<%=basePath%>/userList">
                <span class="icon-box"><i class="icon-user"></i></span> 用户管理
                </a>
            </li>
            <li>
                <a class="" href="<%=basePath%>/commentList">
                <span class="icon-box"><i class="icon-file-alt"></i></span> 评价管理
                </a>
            </li>
        </ul>
        <!-- END SIDEBAR MENU -->
    </div>
    <!-- END SIDEBAR -->
    <!-- BEGIN PAGE -->
    <div id="main-content">
        <!-- BEGIN PAGE CONTAINER-->
        <div class="container-fluid">
            <!-- BEGIN PAGE HEADER-->
            <div class="row-fluid">
                <div class="span12">
                    <!-- BEGIN THEME CUSTOMIZER-->
                    <div id="theme-change" class="hidden-phone">
                        <i class="icon-cogs"></i>
                        <span class="settings">
                            <span class="text">Theme:</span>
                            <span class="colors">
                                <span class="color-default" data-style="default"></span>
                                <span class="color-gray" data-style="gray"></span>
                                <span class="color-purple" data-style="purple"></span>
                                <span class="color-navy-blue" data-style="navy-blue"></span>
                            </span>
                        </span>
                    </div>
                    <!-- END THEME CUSTOMIZER-->
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title">
                        播客系统后台
                    </h3>
                    <ul class="breadcrumb">
                        <li>
                            <a href="#"><i class="icon-home"></i></a><span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="#">视频管理</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li><a href="#">添加视频</a><span class="divider-last">&nbsp;</span></li>
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
            <div class="row-fluid">
                <div class="span12 sortable">
                    <!-- BEGIN SAMPLE FORMPORTLET-->
                    <div class="widget">
                        <div class="widget-title">
                            <h4><i class="icon-reorder"></i> 添加视频</h4>
                                        <span class="tools">
                                        <a href="javascript:;" class="icon-chevron-down"></a>
                                        <a href="javascript:;" class="icon-remove"></a>
                                        </span>
                        </div>
                        <div class="widget-body">
                            <!-- BEGIN FORM-->
                            <form id="uploadForm" class="form-horizontal" enctype="multipart/form-data">
                                <div class="control-group">
                                    <label class="control-label">视频名称</label>
                                    <div class="controls">
                                        <input type="text" name="title" id="videoTitle" placeholder="视频名称" class="input-xxlarge"/>
                                        <p id="title.info" style="color:green"></p>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">视频类型</label>
                                    <div class="controls">
                                        <select class="input-medium m-wrap" tabindex="1" id="categoryList" name="categoryID">
                                       	<c:forEach items="${requestScope.categories}" var="category" varStatus="loop">
                                            <option value="${category.categoryID }">${category.categoryName}  ${category.type }</option>
                                        </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">视频集数</label>
                                    <div class="controls">
                                        <input id="setNumber" type="number" min="1" max="1000" step="1" name="setNumber" value="1">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">视频描述</label>
                                    <div class="controls">
                                        <textarea id="description" class="input-xxlarge" placeholder="视频描述" rows="3" name="description"></textarea>
                                        <p id="description.info" style="color:red"></p>
                                    </div>
                                </div>
                                <!-- BEGIN UPLOAD -->
                                <div class="control-group">
                                    <label class="control-label">上传视频</label>
                                    <div class="controls">
                                        
                                    <input type="file" name="file" id="file" accept="video/*">
                                        
                                    </div>
                                </div>
                                <!-- END UPLOAD -->
                                <div class="form-actions">
                                    <button type="button" class="btn blue" onclick="submitVideo()"><i class="icon-ok"></i> 确定</button>
                                    <button type="button" class="btn"><i class=" icon-remove"></i> 取消</button>
                                </div>
                            </form>
                            <!-- END FORM-->
                        </div>
                    </div>
                    <!-- END SAMPLE FORM PORTLET-->
                </div>
            </div>

            <!-- END PAGE CONTENT-->         
         </div>
         <!-- END PAGE CONTAINER-->
      </div>
      <!-- END PAGE -->  
   </div>
   <!-- END CONTAINER -->
   <!-- BEGIN FOOTER -->
   <div id="footer">
       2018 &copy; Admin Lab.
      <div class="span pull-right">
         <span class="go-top"><i class="icon-arrow-up"></i></span>
      </div>
   </div>
   <!-- END FOOTER -->
   <!-- BEGIN JAVASCRIPTS -->    
   <!-- Load javascripts at bottom, this will reduce page load time -->
   <script src="js/jquery-1.8.3.min.js"></script>
   <script src="assets/bootstrap/js/bootstrap.min.js"></script>
   <script src="js/jquery.blockui.js"></script>
   <script type="text/javascript" src="js/jquery.form.js"></script>
   <script type="text/javascript" src="js/ajaxfileupload.js"></script>
   <!-- ie8 fixes -->
   <!--[if lt IE 9]>
   <script src="js/excanvas.js"></script>
   <script src="js/respond.js"></script>
   <![endif]-->
   <script type="text/javascript" src="assets/chosen-bootstrap/chosen/chosen.jquery.min.js"></script>
   <script type="text/javascript" src="assets/uniform/jquery.uniform.min.js"></script>
   <script src="js/scripts.js"></script>
   <script>
      jQuery(document).ready(function() {       
         // initiate layout and plugins
         App.init();
      });
   </script>
   <script>
   function submitVideo() {
	   
	   //var userID = document.getElementById("userID").innerHTML;
	  var title = $('#uploadForm').serializeArray()[0].value;
	  var categoryID = $('#uploadForm').serializeArray()[1].value;
	  var setNumber = $('#uploadForm').serializeArray()[2].value;
	  var description = $('#uploadForm').serializeArray()[3].value;
	 
	  var userID = document.getElementById("userID").innerHTML;
		$.ajaxFileUpload({ 
          method:"POST",
          url:"uploadVideo?userID="+ userID + "&title=" 
        		  + title + "&categoryID=" + categoryID + "&setNumber=" + setNumber + "&description=" + description ,            //需要链接到服务器地址  
          secureuri:true,  
          fileElementId:'file',                        //文件选择框的id属性 
          dataType: 'JSON', 
          data: $('#uploadForm').serializeArray(),
          success: function(data){
          	alert("上传成功");
          	$('#uploadForm')[0].reset(); 
          	$("#title\\.info").html("");
          	$("#description\\.info").html("");
    
          },error: function (data){
          	alert("上传失败");
          
          }  
      });
   }
   
   $(function () {
	    // 输入的昵称不能与已注册昵称重复
		$("#videoTitle").blur(function (){
			var title = $(this).val();
			$.ajax({
				type:'post',
				url:'checkTitleExist',
				dataType:'json',
				data:{'title':title},
				success: function(data){
					if(data.setNumber != "0"){
						
						$("#title\\.info").html("该剧集已存在，请上传相关续集: 第" + data.setNumber + "集和其后的集数");
						$("#setNumber").val(data.setNumber);
						$("#categoryList").val(data.categoryID);
						return;
					}else{
						$("#title\\.info").html("");
						
					}
				}
			});
	    });
	    
		$("#description").blur(function (){
			var description = $(this).val();
				if(description.length == 0){
					$("#description\\.info").html("请填写视频相应描述");
					return;
				}else{
					$("#description\\.info").html("");
				}
			});
   });
   </script>
   <!-- END JAVASCRIPTS -->   
</body>
<!-- END BODY -->
</html>